<template>
  <div class="drag3_container">
    <h3>不同的模块，不同的宽度进行拖拽</h3>
    <vue-draggable :animation="100" class="drag3_main" handle=".item">
      <div class="item" :style="{ background: getRandomColor() }">模块1</div>
      <div class="item" :style="{ background: getRandomColor() }">模块2</div>
      <div class="item" :style="{ background: getRandomColor() }">模块3</div>
      <div class="item" :style="{ background: getRandomColor() }">模块4</div>
      <div class="item" :style="{ background: getRandomColor() }">模块5</div>
      <div class="item" :style="{ background: getRandomColor() }">模块6</div>
    </vue-draggable>
  </div>
</template>
<script>
import { getRandomColor } from '@/utils'
import VueDraggable from 'vuedraggable'
export default {
  name: 'drag3',
  components: {
    VueDraggable,
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    getRandomColor,
  },
}
</script>
<style lang="less" scoped>
.drag3_main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 100%;
    height: 100%;
    &:nth-child(1) {
      flex: 0 0 120px;
    }
    &:nth-child(2) {
      flex: 0 0 200px;
    }
    &:nth-child(3) {
      flex: 0 0 150px;
    }
    &:nth-child(4) {
      flex: 0 0 300px;
    }
    &:nth-child(5) {
      flex: 0 0 50px;
    }
    &:nth-child(6) {
      flex: 0 0 90px;
    }
  }
}
</style>
